import React from "react";
import "./detailstopic.css"
import { Link, useParams,useNavigate } from "react-router-dom"
import { getDetailsTopic,getTopicTitle } from "../../api/home"

function Detailstopic() {
    let navigate = useNavigate();//链接跳转

    let params = useParams(); //获取链接数据
    let [content, setContent] = React.useState(null);
    let [title, setTitle] = React.useState(null);

    React.useEffect(()=>{
        getDetailsTopic(params.id).then(data=>{
            setContent(data.data.content)
            setTitle(data.data)
            console.log(data);
        })
        // getTopicTitle(460).then(data=>{
        //     console.log(data.data);
        //     setTitle(data.data)
        //     // console.log(title);
        // })
    },[])

    return title ?  (
        <div className="detailstopic">
            <div className="top">
                <div className="left">
                <i onClick={() => navigate(-1)} className="iconfont icon-zuobian"></i>
                </div>
                <div className="title">{title.description}</div>
                <div className="right">
                    <span className="iconfont icon-sort"></span>
                </div>
            </div>
            <div className="theme-show">
                <div className="reference-md">
                    <img src={title.image} />
                    <div className="reference">
                        <div className="avatar">
                            <img src={title.headphoto} />
                            <div className="name">{title.nickname}</div>
                        </div>
                        <div className="bar">
                            <i className="icon"></i> 阅读量 {title.visit}
                        </div>
                        <h4>{title.title}</h4>
                    </div>
                </div>
                <div className="theme-detail">
                    <div className="edit" dangerouslySetInnerHTML={{__html:content }}>
                        {/* <p style="text-align: center;"></p> */}
                    </div>
                </div>
            </div>
        </div>
    ):null
}

export default Detailstopic;